<template>
  <div ref="chartRef" :style="{ height, width }">
    <a-empty v-if="isEmpty" style="margin-top: 80px; margin-left: 180px; position: fixed" />
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref, Ref, watch } from 'vue';
import { useECharts } from '@/hooks/web/use-echarts';
import { useDataSource } from '@/hooks/web/use-echarts/useDataSource';
import { basicProps } from './props';

const props = defineProps({
  ...basicProps,
});

const chartRef = ref<HTMLDivElement | null>(null);
const isEmpty = ref(true);
const { setOptions } = useECharts(chartRef as Ref<HTMLDivElement>);
let { queryData } = useDataSource(props, initOptions);

/**
 * 初始化
 */
function initOptions(chartData) {
  isEmpty.value = true;
  if (chartData && chartData.yData.length > 0) {
    isEmpty.value = false;
  }
  let option: any = {
    title: {
      text: '各地数据量排名',
      left: '35%',
    },
    tooltip: {
      formatter: '{c}',
    },
    grid: {
      top: 40,
      width: '64%',
      height: '86%',
      left: '10%',
    },
    xAxis: {
      type: 'value',
      name: '',
      nameTextStyle: {
        align: 'left',
        verticalAlign: 'top',
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        lineStyle: {
          color: ['#bababa'],
        },
      },
    },
    yAxis: [
      {
        data: chartData.yData,
        inverse: true, //反向
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: '#fff',
          fontSize: 12,
          align: 'center',
          margin: 18,
          formatter: function (value, index) {
            let ind = index + 1;
            if (ind == 1) {
              return '{a|' + ind + '}';
            } else if (ind == 2) {
              return '{b|' + ind + '}';
            } else if (ind == 3) {
              return '{c|' + ind + '}';
            } else {
              return '{d|' + ind + '}';
            }
          },
          rich: {
            a: {
              backgroundColor: '#f6593a',
              width: 18,
              height: 18,
              lineHeight: 10,
              borderRadius: 9,
            },
            b: {
              backgroundColor: '#f6a43a',
              width: 18,
              height: 18,
              lineHeight: 10,
              borderRadius: 9,
            },
            c: {
              backgroundColor: '#e2c818',
              width: 18,
              height: 18,
              lineHeight: 10,
              borderRadius: 9,
            },
            d: {
              backgroundColor: '#16b5ab',
              width: 18,
              height: 18,
              lineHeight: 10,
              borderRadius: 9,
            },
          },
        },
      },
      {
        inverse: true, //反向
        position: 'right', //坐标轴位置，移至右边
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        show: true,
        data: chartData.yData,
        axisLabel: {
          color: '#333',
          formatter: function (value, index) {
            if (value.length > 15) {
              return value.slice(0, 6) + '...';
            } else {
              return value;
            }
          },
        },
      },
    ],
    series: [
      {
        type: 'bar',
        itemStyle: {
          color: 'rgba(0,0,0,0.05)',
          barBorderRadius: [30, 30, 30, 30],
        },
        barWidth: 20,
        barGap: '-100%',
        barCategoryGap: '40%',
        data: chartData.maxData,
        animation: false,
        yAxisIndex: 1, //使用右侧y轴
        tooltip: {
          show: false,
        },
      },
      {
        name: '数据量',
        type: 'bar',
        barWidth: 20,
        data: chartData.seriesData, //次数列表
        yAxisIndex: 1, //使用右侧y轴
        color: {
          type: 'linear',
          x: 0,
          y: 0,
          x2: 1,
          y2: 0,
          colorStops: [
            {
              offset: 1,
              color: '#0fe5e3', // 0% 处的颜色
            },
            {
              offset: 0,
              color: '#2ca1d6', // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        itemStyle: {
          barBorderRadius: [30, 30, 30, 30],
        },
        label: {
          show: false,
        },
      },
    ],
  };
  setOptions(option, true);
}

function initData(params) {
  queryData({
    url: '/analysis/visitAnalysisTopBar',
    params,
  });
}

watch(props, (nweProps, oldProps) => {
  initData({
    dateRuleCode: props.dateRuleCode,
    dataType: props.dataType,
    year: props.dateTypeValue,
    airportId: props.airportId,
  });
});

onMounted(() => {
  initData({
    dateRuleCode: 'year',
    dataType: props.dataType,
    year: props.dateTypeValue,
    airportId: props.airportId,
  });
});
</script>
